﻿<html>
<head>
    <title>Angular JS Views</title>
    <script type="text/javascript" src="content/angular-v1.4.1/angular.min.js"></script>
    <script type="text/javascript" src="content/angular-v1.4.1/angular-route.min.js"></script>
</head>
<body>
    <h2>AngularJS Sample Application</h2>
    <div ng-app="mainApp">
        <p><a href="#addStudent">Add Student</a></p>
        <p><a href="#viewStudents">View Students</a></p>
        <div ng-view></div>
        <script type="text/ng-template" id="addStudent.html">
            <h2> Add Student </h2>
            {{message}}
        </script>
        <script type="text/ng-template" id="viewStudents.html">
            <h2> View Students </h2>
            {{message}}
            <div class="collection z-depth-1">
                <a class="collection-item hoverable" href="{{Article.Link}}" target="_blank" ng-repeat="Article in Articles">
                    {{Article.Title}}<span class="badge">{{Article.Time}}</span>
                </a>
            </div>
        </script>
    </div>

    <script>
        var mainApp = angular.module("mainApp", ['ngRoute']);

        mainApp.config(['$routeProvider',
           function ($routeProvider) {
               $routeProvider.
                  when('/addStudent', {
                      templateUrl: 'addStudent.html',
                      controller: 'AddStudentController'
                  }).
                  when('/viewStudents', {
                      templateUrl: 'Views/Home.html',
                      controller: 'ViewStudentsController'
                  }).
                  otherwise({
                      redirectTo: '/addStudent'
                  });
           }]);

        mainApp.controller('AddStudentController', function ($scope) {
            $scope.message = "This page will be used to display add student form";
        });

        mainApp.controller('ViewStudentsController', function ($scope, $http) {
            $scope.message = "This page will be used to display all the students";
            $http({
                url: "/Data/ArticleList.html"
            }).success(function (data, status) {
                //$scope.status = status;
                $scope.Articles = data.Data;
            }).error(function (data, status) {
                //$scope.data = data || "Request failed";
            });
        });
    </script>
</body>
</html>